<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr>  
    <button @click="changeName">obj.name: {{ obj.name }}</button>
    <div>obj.age: {{ obj.age }}</div>
    <hr>
    <button @click="changeName2">obj2.name: {{ obj2.name }}</button>  
    <div>obj2.age: {{ obj2.age  }}</div>  
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {

    let obj = {
      name: '葛晨',
      age: 250
    }

    let obj2 = reactive(obj)
    console.log(obj2);
    console.log(obj2.name);

    let changeName = () => {
      obj.name += '2b'
    }

    let changeName2 = () => {
      
      obj2.name += '信球'
    }

    return {
      obj,
      changeName,
      obj2,
      changeName2
    }

  }
}
</script>

<style scoped >

</style>